<template>
	<div>
		
		<ARR></ARR>
		
		<SLO>
			<!-- 使用组件时，在组件标签中的内容，映射到组件内的slot插槽中 -->
			<!-- 当父组件想子组件映射内容时，如果没有定义name，则会默认映射到name为default的slot插槽中 -->
			<p>父组件传给子组件的slot插槽映射内容</p>
			<!-- v-slot属性只能使用在template和组件标签上 -->
			<!-- slot中的template只起到包裹的作用，不会被渲染 -->
			<!-- v-slot:slot_01可以简写为#slot_01 -->
			<template #slot_01>
				<p>父组件通过template传给子组件的slot(slot_01)插槽映射内容</p>
			</template>
			
			<!-- 作用域插槽声明的值可以在父组件中获取 -->
			<template #slot_02="obj">
				<p>作用域插槽{{ obj }}</p>
				<p>作用域插槽解构Prop:{{ obj.msg }}</p>
				<p>作用域插槽解构Prop:{{ obj.user }}</p>
			</template>
			
			<template #slot_03="{msg,user}">
				<p>作用域插槽解构Prop:{{ msg }}</p>
				<p>作用域插槽解构Prop:{{ user }}</p>
			</template>
			
		</SLO>
		
		<DIR>
			
		</DIR>
		
	</div>
</template>

<script>
	import ARR from '@/components/ASD/arr'
	import SLO from '@/components/ASD/slo'
	import DIR from '@/components/ASD/dir'
	export default{
		components:{
			ARR,
			SLO,
			DIR
		},
		data:{
			return:{
			}
		}
	}
</script>

<style>
</style>